<template>
  <div class="box">
    <div class="box-left">
      <div class="box-left-top">
        <div>
          <img class="base-img" :src="require('@/assets/5.jpg')" alt="" />
        </div>
        <div class="box-left-top-right">
          <div class="right-top-box">
            <div class="top-box-c">
              <div><h3>占位占位占位</h3></div>
              <div>
                <br />
                <h5>相似歌曲</h5>
                <br />
                <ul>
                  <li>歌曲1</li>
                  <li>歌曲2</li>
                  <li>歌曲3</li>
                </ul>
              </div>
            </div>
            <div style="flex: 1">
              <scroll-text :time="time" :isplay="play"></scroll-text>
            </div>
          </div>
          <div class="right-box">
            <img
              style="width: 20px; height: 20px; margin: 12px; z-index: 20"
              :src="require('@/assets/play1.png')"
              alt=""
              @click="playSong()"
            />
            <av-waveform
              ref="player"
              :canv-width="800"
              :canv-height="60"
              noplayed-line-color="grey"
              :playtime="false"
              caps-color="#FFF"
              :bar-color="['#f00', '#ff0', '#0f0']"
              canv-fill-color="#000"
              :caps-height="2"
              audio-src="http://m10.music.126.net/20211205200515/6769d206d0ebaa416dec49d18e9a1cf4/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/2600783032/980c/dcc8/b7b8/d36c65f90dace397bb3d1a49ea9b4800.mp3"
            ></av-waveform>
            <!-- :audio-src="require('@/assets/jq22.mp3')" -->
          </div>
        </div>
      </div>
      <div class="box-left-bot">
        <div>
          <div class="btn-list">
            <div class="list-left">
              <input type="button" value="按钮" />
              <input type="button" value="按钮" />
              <input type="button" value="按钮" />
              <input type="button" value="按钮" />
            </div>
            <!-- <div class="list-right">
              <div>占位</div>
              <div>占位</div>
              <div>占位</div>
            </div> -->
          </div>

          <div>
            <info-item></info-item>
          </div>
        </div>
      </div>
    </div>
    <div class="box-right">
      <div>
        <img class="base-img" :src="require('@/assets/5.jpg')" alt="" />
      </div>
      <div>
        <div style="text-align: left">
          <div>———点赞的人</div>
          <div>
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
            <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
          </div>
        </div>
        <div style="text-align: left">
          <div>———占位占位</div>
          <div style="display: flex; flex-wrap: wrap">
            <div class="info-box">
              <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
              <div>
                占位 <br />
                占位
              </div>
            </div>
            <div class="info-box">
              <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
              <div>
                占位 <br />
                占位
              </div>
            </div>
            <div class="info-box">
              <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
              <div>
                占位 <br />
                占位
              </div>
            </div>
            <div class="info-box">
              <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
              <div>
                占位 <br />
                占位
              </div>
            </div>
          </div>
        </div>
        <div style="text-align: left">
          <div>———占位占位</div>
          <div style="display: flex; flex-wrap: wrap">
            <div class="info-box">
              <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
              <div>
                占位 <br />
                占位
              </div>
            </div>
            <div class="info-box">
              <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
              <div>
                占位 <br />
                占位
              </div>
            </div>
            <div class="info-box">
              <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
              <div>
                占位 <br />
                占位
              </div>
            </div>
            <div class="info-box">
              <img class="com-img" :src="require('@/assets/5.jpg')" alt="" />
              <div>
                占位 <br />
                占位
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Waveform from "@/components/Waveform.vue";
import InfoItem from "../components/InfoItem.vue";
import ScrollText from "../components/ScrollText.vue";
export default {
  name: "playing",
  components: {
    Waveform,
    InfoItem,
    ScrollText,
  },
  data() {
    return {
      play: false,
      time:0
    };
  },
//   computed: {
//     time: function () {
//         console.log(2222);
//       return this.$refs.player?.audio?.currentTime || 10;
//     },
//   },
  mounted() {
    const audio = this.$refs.player;

    audio.audio.style.display = "none";
    console.log(audio, audio.audio.currentTime);
    audio.audio.addEventListener('timeupdate',(e) => {
        this.time = e.timeStamp/1000
        console.log(this.time);
        console.log(e.timeStamp);
    })
  },
  methods: {
    playSong: function () {
      this.play = !this.play;
    },
  },
  watch: {
    play(val) {
      console.log(22222);
      if (val) {
        this.$refs.player.audio.play();
        console.log(this.$refs.player.audio.currentTime);
        this.$refs.player.audio.currentTime;
      } else {
        this.$refs.player.audio.pause();
      }
    },
  },
};
</script>
<style scoped>
.box {
  display: flex;
  height: 100%;

    padding: 12px;
}
.base-img {
  height: 360px;
  width: 280px;
}
.com-img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.box-left {
  width: 80%;
  /* background-color: #fff; */
  display: flex;
  flex-direction: column;
}
.box-right {
  width: 20%;
  /* background-color: #000; */
}
.box-left-top {
  height: 380px;
  display: flex;
}
.box-left-top {
}
.box-left-top-right {
  display: flex;
  flex-direction: column;
}
.right-box {
  display: flex;
}
.right-top-box {
  flex: 1;
  display: flex;
}
ul,
li {
  list-style: none;
  font-size: 12px;
}
.top-box-c {
  width: 200px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  font-size: 14px;
}
.info-box {
  display: flex;
  font-size: 14px;
  margin: 12px;
}
.info-box img {
  height: 40px;
  width: 40px;
}
.btn-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px 10px 100px;
}
.list-left input {
  margin: 2px 24px;
  width: 120px;
}
</style>
